<template>
	<view class="container">
		<!-- 仓库列表 -->
		<view v-if="!loading && warehouseList.length" class="warehouse-list">
			<view v-for="(item, idx) in warehouseList" :key="item.id || idx" class="warehouse-card">
				<WarehourseItem :item="item" @reserve="goReserve(item)" @contact="goContact(item)" />
			</view>
			<view v-if="hasMore" class="load-more" @click="loadMore">
				<uni-load-more :status="loadMoreStatus" :content-text="loadMoreText"></uni-load-more>
			</view>
		</view>

		<view v-else-if="!loading && !warehouseList.length" class="empty-state">
			<image src="/static/assets/empty/empty-warehouse.png" class="empty-image" mode="aspectFit" />
			<text class="empty-text">暂无相关仓库信息</text>
			<text class="empty-subtext">试试调整筛选条件或搜索关键词</text>
		</view>

		<!-- 加载状态 -->
		<view v-if="loading" class="loading-state">
			<uni-load-more status="loading" :content-text="loadMoreText"></uni-load-more>
		</view>

		<!-- 通用选择弹窗 -->
		<uni-popup ref="selectorPopup" type="bottom" background-color="#fff">
			<view class="selector-popup">
				<view class="selector-popup__header">
					<text class="selector-popup__title">{{ currentSelector.title }}</text>
					<text class="selector-popup__close" @tap="closeSelector">关闭</text>
				</view>
				<scroll-view scroll-y style="max-height: 60vh;">
					<view v-for="(opt, i) in currentSelector.options" :key="opt.value" class="selector-option" :class="{ 'selector-option--active': opt.value === currentSelector.selectedValue }" @tap="selectOption(opt)">
						<text class="selector-option__label">{{ opt.label }}</text>
						<text v-if="opt.value === currentSelector.selectedValue" class="selector-option__check">✓</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import WarehourseItem from '@/components/warehourseItem.vue';
import SearchBox from '@/components/SearchBox.vue';
import WarehouseCategoryRow from '@/components/WarehouseCategoryRow.vue';
import { API } from '@/utils/api.js';
import { 
  getFullUrl, 
  processWarehouseUrls, 
  processNewsUrls 
} from '@/utils/url-helper.js';
	export default {
		components:{
			WarehourseItem,
			SearchBox,
			WarehouseCategoryRow
		},
		data() {
			return {
				searchValue: '',
				// 接口数据
				parkList: [],
				parkAreaList: [],
				warehouseTypes: [],
				warehouseTags: [],
				warehouseList: [],
				// 分页
				page: 1,
				size: 10,
				hasMore: false,
				loading: false,
				loadMoreStatus: 'more',
				// 选择器 & 筛选
				filters: {
					parkId: null,
					areaId: null,
					typeId: null,
					tagId: null,
					parkLabel: '',
					areaLabel: '',
					typeLabel: '',
					tagLabel: ''
				},
				currentSelector: {
					key: '',
					title: '',
					options: [],
					selectedValue: null
				}
			}
		},
		computed: {			
			loadMoreText() {
				return {
					contentdown: '上拉显示更多',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				};
			}
		},
		async onLoad(query) {
			// 如果是从园区详情页跳转过来，设置parkId筛选
			if (query?.parkId) {
				await this.loadWarehouseList({parkId: query.parkId});
			}
		},
		// 添加分享功能
		onShareAppMessage() {
			return {
				title: '精选仓库列表 - 优质仓储资源',
				path: '/pages/warehouse/warehouseList',
				imageUrl: '/static/assets/share/warehouse-list-share.png'
			}
		},
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '精选仓库列表 - 优质仓储资源',
				imageUrl: '/static/assets/share/warehouse-list-share.png'
			}
		},
		methods: {
			

			
			normalizeOptions(list, labelKeys = [], valueKeys = []) {
				if (!Array.isArray(list)) return [];
				const pickFirst = (obj, keys, fallback) => {
					for (let i = 0; i < keys.length; i += 1) {
						const k = keys[i];
						if (obj && obj[k] !== undefined && obj[k] !== null && obj[k] !== '') return obj[k];
					}
					return fallback;
				};
				return list.map((it, idx) => ({
					label: pickFirst(it, labelKeys.concat(['label','name','title','parkName','areaName','typeName','tagName']), `选项${idx+1}`),
					value: pickFirst(it, valueKeys.concat(['id','value','code','key']), idx),
					raw: it
				}));
			},
			
			async loadWarehouseList(params) {
				this.loading = true;
				try {
					const requestParams = {
						page: this.page,
						size: this.size,
						...params
					};
				
					const res = await API.warehouse.getList(requestParams);
					
					if (res?.code === 200 && res.rows) {
						console.log("仓库列表数据:", res.rows);
						
						// 处理图片URL
						const processedData = processWarehouseUrls ? processWarehouseUrls(res.rows) : res.rows;
						
						// 添加特殊标签
						processedData.forEach(item => {
							if (item.vrLink && item.vrLink.length > 0) {
								item.warehouseTags = [{
									tagName: 'VR看仓',
									tagImage: '/static/assets/home/home-icon-vr.png',
									tagId: -2
								}, ...(item.warehouseTags || [])];
							}
							if (item.isRecommend) {
								item.warehouseTags = [{
									tagName: '推荐',
									tagImage: '/static/assets/home/home-isRecommend.png',
									tagId: -1
								}, ...(item.warehouseTags || [])];
							}
						});
						
						// 如果是第一页，直接替换；否则追加
						if (this.page === 1) {
							this.warehouseList = processedData;
						} else {
							this.warehouseList = [...this.warehouseList, ...processedData];
						}
						
						// 判断是否还有更多数据
						this.hasMore = processedData.length >= this.size;
					} else {
						if (this.page === 1) {
							this.warehouseList = [];
						}
						this.hasMore = false;
					}
				} catch (e) {
					console.error('获取仓库列表失败', e);
					if (this.page === 1) {
						this.warehouseList = [];
					}
					this.hasMore = false;
				} finally {
					this.loading = false;
				}
			},

			// 加载更多
			async loadMore() {
				if (this.loading || !this.hasMore) return;
				
				this.page += 1;
				this.loadMoreStatus = 'loading';
				await this.loadWarehouseList();
				this.loadMoreStatus = this.hasMore ? 'more' : 'noMore';
			},
			
			// 跳转到仓库详情
			goReserve(item) {
				const warehouseId = item.warehouseId || item.id;
				if (warehouseId) {
					uni.navigateTo({
						url: `/pages/warehouse/warehouseDetail?warehouseId=${warehouseId}`
					});
				}
			},
			
			// 联系仓库
			goContact(item) {
				const phone = item.contactPhone || item.phone || (item.contact && item.contact.phone);
				if (phone) {
					uni.makePhoneCall({ phoneNumber: String(phone) });
				} else {
					uni.showToast({ title: '暂无联系电话', icon: 'none' });
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		background: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.search-section {
		background: #ffffff;
		padding: 20rpx 24rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
	}

	.filter-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 16rpx;
		padding: 16rpx 24rpx;
		background: #ffffff;
		margin-bottom: 16rpx;
	}

	.filter-tag {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 8rpx 16rpx;
		background: #f0f8ff;
		border: 1rpx solid #e6f3ff;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #1890ff;
	}

	.filter-tag__text {
		font-size: 24rpx;
	}

	.filter-tag__close {
		font-size: 28rpx;
		font-weight: bold;
		color: #1890ff;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin: 20rpx 16rpx 0 16rpx;
	}

	.search-input {
		flex: 1;
		background: #ffffff;
		border-radius: 30rpx;
		padding: 16rpx;
		font-size: 28rpx;
		border: 1rpx solid #e8e8e8;
	}

	.filter-btn {
		margin-left: 12rpx;
		background: #ffffff;
		border: 1rpx solid var(--primary-color);
		border-radius: 30rpx;
		color: var(--primary-color);
		display: flex;
		align-items: center;
		padding: 0 18rpx;
	}

	.category-row {
		display: flex;
		justify-content: space-around;
		margin: 16rpx 0 8rpx 0;
		
	}

	.category-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;
		padding: 10rpx 30rpx;
	}

	.category-row-bg {
		width: 110rpx;
		height: 110rpx;
		border-radius: 16rpx;
		background-image: url('/static/assets/source/category-row-bg.png');
		background-size: 100% 100%;
		background-position: center;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		overflow: hidden;
	}

	.load-more {
		padding: 20rpx 0;
		text-align: center;
		background: #ffffff;
		margin: 16rpx 24rpx;
		border-radius: 16rpx;
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 80rpx 40rpx;
		min-height: 500rpx;
		background: #ffffff;
		margin: 16rpx 24rpx;
		border-radius: 16rpx;
		
		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 24rpx;
			opacity: 0.6;
		}
		
		.empty-text {
			color: #666;
			font-size: 28rpx;
			margin-bottom: 16rpx;
			font-weight: 500;
		}
		
		.empty-subtext {
			color: #999;
			font-size: 24rpx;
		}
	}

	.loading-state {
		display: flex;
		justify-content: center;
		padding: 40rpx 0;
		background: #ffffff;
		margin: 16rpx 24rpx;
		border-radius: 16rpx;
	}

	.category-row-bg__img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
		pointer-events: none;
	}

	.category-row-icon {
		width: 40rpx;
		height: 40rpx;
		object-fit: contain;
		position: relative;
		z-index: 1;
	}

	.selected-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;
		color: #C6282B;
		padding: 0 26rpx;
	}

	.warehouse-list {
		padding: 0 24rpx;
		
		.warehouse-card {
			margin-bottom: 16rpx;
			background: #ffffff;
			border-radius: 16rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
		}
	}

	.warehouse-info {
		margin-bottom: 12rpx;
	}

	.desc {
		color: #888;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}

	.address,
	.area {
		display: flex;
		align-items: center;
		color: #888;
		font-size: 24rpx;
		margin-bottom: 4rpx;
	}

	.tags {
		margin: 8rpx 0;
		display: flex;
		flex-wrap: wrap;
	}

	.card-btns {
		display: flex;
		justify-content: space-between;
		margin-top: 12rpx;
	}

	.btn {
		width: 45%;
	}

	/* 选择弹窗样式 */
	.selector-popup {
		padding: 24rpx 24rpx 12rpx 24rpx;
	}
	.selector-popup__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.selector-popup__title {
		font-size: 30rpx;
		font-weight: 600;
	}
	.selector-popup__close {
		font-size: 26rpx;
		color: #888;
	}
	.selector-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 8rpx;
		border-bottom: 1rpx solid #f7f7f7;
	}
	.selector-option--active .selector-option__label {
		color: var(--primary-color);
		font-weight: 600;
	}
	.selector-option__label {
		font-size: 28rpx;
	}
	.selector-option__check {
		color: var(--primary-color);
		font-size: 28rpx;
	}
</style>